
import { defineComponent, PropType, reactive, ref } from "vue";
import { KEEP_VIDEO_TOP } from "~/src/config";
import Pagination from "../Pagination";

import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import router from "@/router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";
import {closeLoading, showLoading} from "@/utils";
import {getMzpbYs, getMzpbYyHy} from "@/api/his";
import {usePage} from "@/utils/hooks";
import {Doctor, hyType} from "@/api/typing";
import {useRoute} from "vue-router";
import {ghStore} from "@/store/modules/yvyue";


export default defineComponent({

    emits: ["selectData"],
    setup(props, { emit, slots }) {

        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080

        const id1 = ref(-1)//改变当前选中号码颜色
        const id2 = ref(-1)//改变当前选中上午下午颜色

        // 前端分页， 一次获取后台超多数据，进行前端分页
        const page = usePage(2000);

        const ghstore =ghStore ();//实例化pinia存储
        const doctor = ghstore.doctor; //获取医生信息
        const RQ = ghstore.date?.rq;//获取选择的日期 5月10号


        const pageSize = ref(KEEP_VIDEO_TOP ? 20 : 27);

        const showDatas = ref<hyType[]>([])
        // 2. 定义【当前激活的数据源】，初始值设为上午数据（swdata）
        const activeData = ref<hyType[]>();
        // 初始化时激活“上午”标签
        id2.value = 1;
        // 3. 上午/下午切换事件：更新activeData和标签激活状态
        const handleTabChange = (tabType: 'morning' | 'afternoon') => {
            if (tabType === 'morning') {
                id2.value = 1; // 激活上午标签
            } else {
                id2.value = 2; // 激活下午标签
            }
            //调用获取号源
            getMzpbHyData(tabType)
            id1.value = -1; // 重置“选中时段”的激活状态
        };


        // 分页组件数据更新
        const handlePageChange = (Datas:any) => {
            showDatas.value = Datas;
        };
        // ✅ 整合后的点击事件处理函数
        const handleClick = (item: hyType, index: number) => {
            // if (item.hyStatus !== '满') {
                id1.value = index;
                const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia存储
                breadcrumbStore.addTitle(item.HDNAME+' '+item.JZ_SJ); // ✅ 使用编号作为Breadcrumb标题

                ghstore.setHy(item); // 存储当前选中号源数据
                router.push({
                    path: '/qrxx',
                    query: {
                        // hyNo: item.hyNo,
                        // hyTime: item.hyTime,
                        // hyStatus: item.hyStatus,
                    }
                });
            // }
        };



        //获取号源 数据morning/afternoon
        async function getMzpbHyData(sj:string) {
            showLoading()
            const res = await getMzpbYyHy({
                ...page.getParam(),
                type: "all",
                ZS_ID: doctor?.ZS_ID ,
                RQ:RQ,
                YS_ID: doctor?.YS_ID,
                SJ: sj,
            })
            activeData.value = res.rows!;
            closeLoading();
        }
        //页面初始化时，默认获取上午数据
        getMzpbHyData('morning')

        return () => <div class={Style.container}>
            <div class={Style.containStyle}>
                <div class={Style.sxw}>
                    <div class={[Style.tag_sxw, Style.fontStyle, id2.value == 1 ? Style.tag_active : ""]}
                        onClick={() => handleTabChange('morning')}
                    >
                        <div >上午</div>
                    </div>
                    <div class={[Style.tag_sxw, Style.fontStyle, id2.value == 2 ? Style.tag_active : ""]}
                        onClick={() => handleTabChange('afternoon')}
                    >
                        <div >下午</div>
                    </div>
                </div>
                <div class={Style.outer}>
                    {
                        showDatas.value.map((e, index) =>
                            <div id={`act${index}`}
                                 class={[ Style.tag,
                                     Style.fontStyle,
                                     id1.value == index ? Style.tag_active : "",
                                 ]}
                                 // style={{margin:"10px 5px"}}
                                 onClick={() => handleClick(e, index)}
                            >
                                {<div>{e.HDNAME}</div>}
                                <div style={{ marginLeft: "5px" }}>{e.JZ_SJ}</div>
                                {/*{e.hyStatus == '满' ? <div style={{ marginLeft: "25px" }}>{e.hyStatus}</div> : ""}*/}

                            </div>
                        )
                    }
                </div>
            </div>
            <Pagination
                style={{padding: "0 64px"}}
                pageSize={pageSize.value}
                Data={activeData.value}
                onPageChange={handlePageChange}
            />
        </div>
    }
})
